<template>

	<div class="login-container">
		<!--log图标区域-->
		<div class="logo">
			<img alt="" src="../assets/logo.png">
		</div>

		<!-- 登录表单区域 -->
		<el-form :model="admin" :rules="userRules" class="loginform_style" label-width="0px" ref="userForm">
			<el-form-item prop="userName">
				<el-input placeholder="输入您的用户名" prefix-icon="el-icon-user-solid" v-model="admin.userName"></el-input>
			</el-form-item>
			<el-form-item prop="userPass">
				<el-input placeholder="输入您的密码" prefix-icon="el-icon-lock" type="password" v-model="admin.userPass"></el-input>
			</el-form-item>
			<el-form-item class="btns">
				<el-button @click="login" type="primary">登录</el-button>
				<el-button @click="resetForm" type="info">重置</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default {
		name: "Login",
		data() {
			return {
				admin: {
					userName: '',
					userPass: ''
				},
				userRules: {
					userName: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}],
					userPass: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							min: 6,
							max: 16,
							message: '请输入6位到16位字符',
							trigger: 'blur'
						}
					]
				}
			}
		},
		methods: {
			login: function() {
				this.$refs['userForm'].validate((valid) => {
					if (!valid) {
						return
					} else {
						let params = new FormData();
						params.append("userName", this.admin.userName)
						params.append("userPass", this.admin.userPass)

						this.$http.post(
								"/login/doAdminLogin",
								params
							)
							.then(response => {
								let data = response.data
								console.log(data)
								if(data.code == 1000) {
									window.sessionStorage.setItem("admin_name",JSON.stringify(data.result.admin));
									window.sessionStorage.setItem("admin_token",data.result.token);
									this.$router.push('/home')
								}
								else {
									this.$message({
										message: data.message,
										type: 'error',
									});
								}
							})
							.catch(error => {
								console.log(error)
							})
							.finally(() => {
								console.log('finish')
							})
					}
				})
			},
			resetForm: function() {
				this.$refs['userForm'].resetFields();
			}
		}
	}
</script>

<style lang="less" scoped>
	.login-container {


		width: 450px;
		height: 314px;
		background-color: #fff;
		position: absolute;
		top: 25%;
		left: 50%;
		transform: translateX(-50%);
		border-radius: 5px;

		.logo {
			width: 130px;
			height: 130px;
			border: 1px solid #eee;
			border-radius: 50%;
			padding: 8px;
			box-shadow: 0 0 10px #eee;
			position: absolute;
			left: 50%;
			transform: translateX(-50%) translateY(-60px);
			background-color: #fff;

			img {
				width: 100%;
				height: 100%;
				border-radius: 50%;
				background-color: #eee;
			}
		}

		.loginform_style {
			padding: 0 20px;
			margin-top: 110px;
		}

		.btns {
			display: flex;
			justify-content: center;
		}
	}
</style>
